<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <form onsubmit="return false">

        <p>
            <label for="">用户名:&nbsp;&nbsp;</label>
            <input type="text" name="user" class="user">
            <span class="user"></span>
        </p>
        <p>
            <label for="">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
            <input type="text" name="pwd" class="pwd">
            <span class="user"></span>
        </p>
        <p>
            <label for="">手机号：</label>
            <input type="text" name="phone" class="phone">
            <span class="user"></span>
        </p>
        <p>
            <label for="">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:</label>
            <input type="text" name="email" class="email">
            <span class="user"></span>

        </p>
        <p>
            <button class="btn1">注册</button>
            <button type="reset" class="btn2">重置</button>
        </p>
    </form>
    <script src="../js/ajax.js"></script>
    <script>

        var user = document.querySelector(".user");
        var pwd = document.querySelector(".pwd");
        var phone = document.querySelector(".phone");
        var email = document.querySelector(".email");
        var px = document.querySelectorAll("p");
        var btn1 = document.querySelector(".btn1");
        var btn2 = document.querySelector(".btn2");
        var userFlag = false;
        var pwdFlag = false;
        var phoneFlag = false;
        var emailFlag = false;
        function isExist(params) {
            var p = new Promise(function (resolve, reject) {
                ajax({
                    url: "../php/isExist.php",
                    data: {
                        ...params
                    },
                    dataType: "json",
                    success: function (result) {
                        console.log(result);
                        var { detail, status } = result;
                        console.log(detail);
                        if (status == true) {

                            resolve(detail);
                        } else {
                            reject(detail);
                        }
                    }
                }
                )
            })
            return p;
        }



        user.onblur = function () {
            userFlag = false;
            var userIpt = user.value;
            // console.log(str);
            var tips = user.nextElementSibling;

            var str = new RegExp(/^[a-zA-Z_]\w{5,}$/);
            if (str.test(userIpt)) {
                isExist({ user: userIpt }).then(function (detail) {
                    tips.innerHTML = `
                            √
                `
                    userFlag = true;
                }, function (detail) {
                    tips.innerHTML = `
                            ${detail}
                                    `
                })

                // var xhr = new XMLHttpRequest();
                // xhr.open("get", `../php/isExist.php?user=${userIpt}`, true);
                // xhr.send();
                // xhr.onreadystatechange = function () {

                //     if (xhr.readyState == 4 && xhr.status == 200) {
                //         var { status, detail } = JSON.parse(xhr.responseText);
                //         if (status) {
                //             tips.innerHTML = `
                //             √
                // `
                //             // console.log(detail)
                //             userFlag = true;
                //         } else {
                //             tips.innerHTML = `
                //             ${detail}
                //                     `
                //         }
                //     }
                // }
            } else {

                tips.innerHTML = `
                    输入格式错误
                `
            }
        }
        pwd.oninput = function () {
            pwdFlag = false;
            var pwdIpt = pwd.value;
            var str1 = new RegExp(/\d/);
            var str2 = new RegExp(/[a-zA-Z]/);
            var str3 = new RegExp(/[^a-zA-Z0-9]/);
            var count = 0
            var tips = pwd.nextElementSibling;
            var str = new RegExp(/^[a-zA-Z_]\w{5,}$/);
            if (str1.test(pwdIpt)) {
                count++
            }
            if (str2.test(pwdIpt)) {
                count++
            }
            if (str3.test(pwdIpt)) {
                count++
            }
            if (count === 1) {
                tips.innerHTML = `
                    密码强度:低
                `
            }
            if (count === 2) {
                tips.innerHTML = `
                    密码强度:中
                `
            }
            if (count === 3) {
                tips.innerHTML = `
                    密码强度:高
                `
            }
            pwd.onblur = function () {
                if (str.test(pwdIpt)) {
                    pwdFlag = true;

                } else {
                    tips.innerHTML = `
                    输入错误
                `
                }
            }
        }




        phone.onblur = function () {
            var phoneIpt = phone.value;
            phonelag = false;
            var str = new RegExp(/^1[3-9]\d{9}$/);
            var tips = phone.nextElementSibling;
            if (str.test(phoneIpt)) {
                var xhr = new XMLHttpRequest();
                xhr.open("get", `../php/isExist.php?phone=${phoneIpt}`, true);
                xhr.send();
                xhr.onreadystatechange = function () {

                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var { status, detail } = JSON.parse(xhr.responseText);
                        if (status) {
                            tips.innerHTML = `
                            √
                `
                            // console.log(detail)
                            phoneFlag = true;
                        } else {
                            tips.innerHTML = `
                            ${detail}
                                    `
                        }
                    }
                }
            } else {

                tips.innerHTML = `
                    输入错误
                `
            }
        }


        email.onblur = function () {
            emailFlag = false;
            var emailIpt = email.value;
            var str = new RegExp(/^[^_$]\S{5,9}@(qq|163|162)\.(com|cn)/);
            if (str.test(emailIpt)) {
                var tips = email.nextElementSibling;
                var xhr = new XMLHttpRequest();
                xhr.open("get", `../php/isExist.php?email=${emailIpt}`, true);
                xhr.send();
                xhr.onreadystatechange = function () {

                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var { status, detail } = JSON.parse(xhr.responseText);
                        if (status) {
                            tips.innerHTML = `
                            √
                `
                            // console.log(detail)
                            emailFlag = true;
                        } else {
                            tips.innerHTML = `
                            ${detail}
                                    `
                        }
                    }
                }
            } else {
                var tips = email.nextElementSibling;
                tips.innerHTML = `
                    输入错误
                `
            }
        }
        btn1.onclick = function () {
            if (emailFlag && pwdFlag && userFlag && phoneFlag) {
                var xhr = new XMLHttpRequest();

                xhr.open("post", "../php/register.php", true);

                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                xhr.send(`user=${user.value}&pwd=${pwd.value}&phone=${phone.value}&email=${email.value}`);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var str = JSON.parse(xhr.responseText);
                        // var { status, detail } = str;
                        if (str.status == true) {
                            alert(str.detail + ",点击确认后跳转到登录页面");
                            location.href = "../html/sign.html"
                        }
                        alert(str.detail + ",请点击确认后重新输入")
                        location.reload();
                    }
                }
            }
        }

    </script>
</body>

</html>